import React, { useContext } from 'react';

import { signOut } from '@/entities/auth/model/actions';
import { innerUrls } from '@/shared/constants/urls';
import { ModalContext } from '@/shared/context/ModalContext';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppDispatch } from '@/shared/store';
import { Button, ButtonVariants, FlexWrapper, Modal, Title } from '@/shared/ui';
import { useRouter } from 'next/router';
import { useWindowSize } from 'usehooks-ts';

import s from './ConfirmExitModal.module.scss';

export const ConfirmExitModal = () => {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  const { closeModal } = useContext(ModalContext);

  const router = useRouter();
  useMetaTag(true, '#999999');
  const { width } = useWindowSize();

  const dispatch = useAppDispatch();

  const handleLogout = () => {
    dispatch(signOut()).then(() => {
      closeModal();
      router.push(innerUrls.main);
    });
  };

  return (
    <Modal className={s.modal} isOpen onCloseClick={closeModal} zIndex={1500}>
      <FlexWrapper gap={width > 1024 ? 32 : 24} isCenter>
        <Title size="modal-size" title="Выйти из аккаунта?" />
        <Button
          disabled={false}
          onClick={handleLogout}
          style={{ marginBottom: width > 1024 ? '24px' : '16px' }}
          variant={ButtonVariants.Danger}
        >
          Выйти
        </Button>
      </FlexWrapper>
      <FlexWrapper isCenter>
        <Button className={s.exit} onClick={closeModal} variant={ButtonVariants.Link}>
          Отмена
        </Button>
      </FlexWrapper>
    </Modal>
  );
};
